<template>
  <div class="contract">
    <div v-if="isPrinting" style="padding: 15px 50px" id="pdfPrint">
      <div class="contract_No">合同编号:RK{{ data.contract_data }} - {{ data.contract_No|repairZero }}
      </div>
      <h1 class="contract_Tit">采购合同</h1>
      <div class="party clearfix">
        <div class="party_A">需方: {{ data.party_A }}</div>
        <div class="party_B">供方: {{ data.party_B }}</div>
      </div>
      <p class="clause">一.产品名称、数量、金额、货期及其它</p>
      <table class="purchasecontracttable" cellpadding="0">
        <tr style="height: 15px">
          <td style="width:30px">序号</td>
          <td style="width:168px">名称</td>
          <td style="width:145px">规格型号</td>
          <td style="width:30px">单位</td>
          <td style="width:50px">数量</td>
          <td style="width:50px">单价</td>
          <td style="width:50px">总价</td>
          <td style="width:50px">货期</td>
        </tr>
        <tr style="height: 18px" v-for="(item,index) in data.purchase_base_details">
          <td><span v-if="item.materiel_name">{{ index }}</span></td><!--序号-->
          <td>{{ item.materiel_name }}</td><!--名称-->
          <td>{{ item.specifications }}</td><!--规格型号-->
          <td>{{ item.unit }}</td><!--单位-->
          <td>{{ item.purchase_unit_count }}</td><!--数量-->
          <td>{{ item.purchase_unit_price }}</td><!--单价-->
          <td>{{ item.purchase_unit_count }}</td><!--总价-->
          <td>{{ item.delivery_period }}</td><!--货期-->
        </tr>
        <tr style="height: 18px">
          <td>合计</td>
          <td colspan="2" class="clearfix" style="padding: 0 3px">
            <span style="float: left">{{ data.chiness_total_fee }}</span>
            <span style="float: right">￥{{ data.materiel_total }}</span>
          </td>
          <td colspan="3">含税 / 未含税</td>
          <td>运费</td>
          <td>{{ data.freight }}</td>
        </tr>
      </table>
      <p class="clause">二、质量要求: {{ data.qa_requirement }}</p>
      <p class="clause">
      <div>三、交货时间: {{ data.send_time_des }}</div>
      <div style="margin: 3px 0">
        <span style="margin-left: 25px">交货地点: {{ data.send_address_des }}</span>
      </div>
      <p class="clause">四、验收及质保: {{ data.check_and_warranty }}</p>
      <p class="clause">五、结算方式及期限: {{ data.settlement_des }}</p>
      <p class="clause">六、开票信息（工房向需方开具全额13%增值税专用发票）</p>
      <div class="pdfcontract_Textarea" v-html="data.pdfparty_A_info"></div>
      <p class="clause">七、供方收款信息:</p>
      <div class="pdfcontract_Textarea" v-html="data.pdfparty_B_info"></div>
      <p class="clause">八、包装运输方式及费用:物流，费用供方承担，供方提供完整不会损坏的包装。</p>
      <p class="clause">
        九、违约责任:按合同法有关条款，供方不能按期交货，每逾期一日，按合同款的0.5%向需方支付违约金，逾期超过三十日，买方有权终止本合同并有权追究供方迟交货给需方带来的损失；需方未能按时支付合同约定的款项，每逾期一日，按货款的0.5%支付违约金。</p>
      <p class="clause">十、解决合同纠纷的方式:未尽事宜，双方友好协商，协商不成的，任何一方有权利向需方所在地有管辖权的法院提起诉讼。</p>
      <p class="clause">十一、其他合同事项:本合同一式两份，甲乙双方各执一份，经双方授权代表人签字盖章后生效，不得违背，传真件、扫描件和复印件具有同等法律效力。</p>
      <div class="bottom_party clearfix">
        <div class="bottom_party_A">
          <p class="clause">需方:（盖章）{{ data.party_A }}</p>
          <p class="clause">联系电话:</p>
          <p class="clause">授权代表:（签字）</p>
          <p class="clause">签订日期:</p>
        </div>
        <div class="bottom_party_B">
          <p class="clause">供方:（盖章）{{ data.party_B }}</p>
          <p class="clause">联系电话:</p>
          <p class="clause">授权代表:（签字）</p>
          <p class="clause">签订日期:</p>
        </div>
      </div>
    </div>
    <div v-else style="padding: 15px 50px">
      <div class="contract_No">合同编号:RK
        <el-input style="width: 100px" v-model="data.contract_data"></el-input>
        -
        <el-input style="width: 40px" v-model="data.contract_No"></el-input>
      </div>
      <h1 class="contract_Tit">采购合同</h1>
      <div class="party clearfix">
        <div class="party_A">需方:
          <el-input style="width: 75%" v-model="data.party_A"></el-input>
        </div>
        <div class="party_B">供方:
          <el-input style="width: 75%" v-model="data.party_B"></el-input>
        </div>
      </div>
      <p class="clause">一.产品名称、数量、金额、货期及其它</p>
      <table class="purchasecontracttable" cellpadding="0">
        <tr style="height: 15px">
          <td style="width:30px">序号</td>
          <td style="width:168px">名称</td>
          <td style="width:145px">规格型号</td>
          <td style="width:30px">单位</td>
          <td style="width:50px">数量</td>
          <td style="width:50px">单价</td>
          <td style="width:50px">总价</td>
          <td style="width:50px">货期</td>
        </tr>
        <tr style="height: 18px" v-for="(item,index) in data.purchase_base_details">
          <td><span v-if="item.materiel_name">{{ index }}</span></td><!--序号-->
          <td>{{ item.materiel_name }}</td><!--名称-->
          <td>{{ item.specifications }}</td><!--规格型号-->
          <td>{{ item.unit }}</td><!--单位-->
          <td>{{ item.purchase_unit_count }}</td><!--数量-->
          <td>{{ item.purchase_unit_price }}</td><!--单价-->
          <td>{{ item.purchase_unit_count }}</td><!--总价-->
          <td>{{ item.delivery_period }}</td><!--货期-->
        </tr>
        <tr style="height: 18px">
          <td>合计</td>
          <td colspan="2" class="clearfix" style="padding: 0 3px">
            <span style="float: left">{{ data.chiness_total_fee }}</span>
            <span style="float: right">￥{{ data.materiel_total }}</span>
          </td>
          <td colspan="3">含税 / 未含税</td>
          <td>运费</td>
          <td>{{ data.freight }}</td>
        </tr>
      </table>
      <p class="clause">二、质量要求:
        <el-input style="width: 458px;" v-model="data.qa_requirement"></el-input>
      </p>
      <p class="clause">
      <div>
        三、交货时间:
        <el-input style="width: 458px;" v-model="data.send_time_des"></el-input>
      </div>
      <div style="margin: 3px 0">
        <span style="margin-left: 25px">交货地点:</span>
        <el-input style="width: 458px;" v-model="data.send_address_des"></el-input>
      </div>
      <p class="clause">四、验收及质保:
        <el-input style="width: 443px;" v-model="data.check_and_warranty"></el-input>
      </p>
      <p class="clause">五、结算方式及期限:
        <el-input style="width: 415px;" v-model="data.settlement_des"></el-input>
      </p>
      <p class="clause">六、开票信息（供方向需方开具全额13%增值税专用发票）</p>
      <div class="contract_Textarea">
        <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="data.party_A_info">
        </el-input>
      </div>
      <p class="clause">七、供方收款信息:</p>
      <div class="contract_Textarea">
        <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="data.party_B_info">
        </el-input>
      </div>
      <p class="clause">八、包装运输方式及费用:物流，费用供方承担，供方提供完整不会损坏的包装。</p>
      <p class="clause">
        九、违约责任:按合同法有关条款，供方不能按期交货，每逾期一日，按合同款的0.5%向需方支付违约金，逾期超过三十日，买方有权终止本合同并有权追究供方迟交货给需方带来的损失；需方未能按时支付合同约定的款项，每逾期一日，按货款的0.5%支付违约金。</p>
      <p class="clause">十、解决合同纠纷的方式:未尽事宜，双方友好协商，协商不成的，任何一方有权利向需方所在地有管辖权的法院提起诉讼。</p>
      <p class="clause">十一、其他合同事项:本合同一式两份，甲乙双方各执一份，经双方授权代表人签字盖章后生效，不得违背，传真件、扫描件和复印件具有同等法律效力。</p>
      <div class="bottom_party clearfix">
        <div class="bottom_party_A">
          <p>需方:（盖章）{{ data.party_A }}</p>
          <p>联系电话:</p>
          <p>授权代表:（签字）</p>
          <p>签订日期:</p>
        </div>
        <div class="bottom_party_B">
          <p>供方:（盖章）{{ data.party_B }}</p>
          <p>联系电话:</p>
          <p>授权代表:（签字）</p>
          <p>签订日期:</p>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin-top: 10px">
      <el-button type="primary" v-if="isPrinting" @click="isPrinting = false">编辑</el-button>
      <el-button type="primary" v-if="isPrinting" @click="getPdf('#pdfPrint')">下载合同</el-button>
      <el-button type="primary" v-if="!isPrinting" @click="save">保存</el-button>
      <el-button type="primary" v-if="!isPrinting" @click="isPrinting = true">预览</el-button>
    </div>

  </div>
</template>

<script>
export default {
  name: "purchase-contract",
  props: ['purchase_id'],
  data() {
    return {
      isPrinting: false,
      purchaseid: '',
      data: {},
    }
  },
  watch: {
    purchase_id: function (newVal, oldVal) {
      this.purchaseid = newVal;
      this.isPrinting = false;
      this.getdata()
    },
  },
  created() {
    this.getpurchase_id();
  },
  filters: {
    repairZero(val) {
      return (Array(3).join(0) + val).slice(-3);
    }
  },
  methods: {
    preText(pretext) {
      return pretext.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;')
    },
    getpurchase_id() {
      this.purchaseid = this.purchase_id;
      this.getdata()
    },
    getdata() {
      this.$get(this.$api + "/warehouse/purchase/get_contract", { purchase_id: this.purchase_id })
          .then((res) => {
            if (res.code === 0) {
              this.data = res.data;
              this.data.pdfparty_A_info = this.preText(res.data.party_A_info);
              this.data.pdfparty_B_info = this.preText(res.data.party_B_info);
              for (var i = 1; this.data.purchase_base_details.length < 5; i++) {
                this.data.purchase_base_details.push([])
              }
            } else {
              this.$notify({
                title: "失败",
                message: res.msg,
                type: "error",
              });
            }
          });
    },
    save() {
      var arr = []
      this.data.purchase_base_details.forEach((item) => {
        if (item.length !== 0) {
          arr.push(item)
        }
      })
      this.data.purchase_base_details = arr
      console.log(this.data);
      this.$post(this.$api + "/warehouse/purchase/save_contract", this.data)
          .then((res) => {
            if (res.code === 0) {
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
              });
            } else {
              this.$notify({
                title: "失败",
                message: res.msg,
                type: "error",
              });
            }
          });
    },
  },
}
</script>

<style scoped>
.contract {
  width: 660px;
  font-size: 12px;
  color: #000000;
}

.contract_No {
  text-align: right;
}

.contract_Tit {
  font-size: 38px;
  margin: 12px 0 18px;
  text-align: center;
}

.party .party_A {
  width: 50%;
  float: left;
}

.party .party_B {
  width: 50%;
  float: left;
}

.bottom_party {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.bottom_party .bottom_party_A {
  float: left;
  width: 48%;
  margin-right: 2px;
}

.bottom_party .bottom_party_B {
  float: left;
  width: 50%;
}

.clause {
  width: 100%;
  line-height: 20px;
  margin: 3px 0;
}

.purchasecontracttable {
  width: 560px;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  font-size: 12px;
  text-align: center;
  border-collapse: collapse;
  word-break: break-all;
  white-space: normal;
  word-wrap: break-word;
}

.purchasecontracttable tr {
  height: 20px;
  line-height: 20px;
}

.purchasecontracttable tr td {
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pdfcontract_Textarea {
  color: #000000;
  background: #EFEFEF;
  line-height: 1.2;
  border-radius: 0;
  border: 1px solid #EFEFEF;
  font-size: 12px;
  padding: 5px 10px;
}
</style>
